<template>
  <el-form ref="form" :model="form" label-width="80px" @submit.prevent="onSubmit" style="margin:20px;width:60%;min-width:600px;">
    <el-form-item label="姓名">
      <el-input v-model="isDisabled?form.name:reform.name" :disabled="isDisabled"></el-input>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="isDisabled?form.phone:reform.phone" :disabled="isDisabled"></el-input>
    </el-form-item>
    <el-form-item label="所属公司">
      <el-input v-model="isDisabled?form.company:reform.company" :disabled="isDisabled"></el-input>
    </el-form-item>
    <el-form-item label="入职时间" style="width:50%">
      <el-input v-model="isDisabled?form.entrytime:reform.entrytime" v-show="isDisabled" :disabled="isDisabled"></el-input>
      <el-date-picker   type="date" v-show="!isDisabled" placeholder="选择日期" v-model="form.entrytime" style="width: 100%;"></el-date-picker>
    </el-form-item>

    <el-form-item>
      <el-button v-show="isDisabled" @click.native="reuser" type="primary">修改个人信息</el-button>
      <el-button v-show="!isDisabled" @click.native="handlesubmit" type="primary">保存</el-button>
      <el-button v-show="!isDisabled" @click.native.prevent="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  //import { getUser,reInfo } from '../../api/api';
  export default {
    data() {
      return {
        isDisabled:true,
        form: {
          id:'',
          name: '',
          enabled:true,
          phone:'',
          company:'',
          entrytime:'2018-1-1'
        },
        reform:{
          id:'',
          enabled:'',
          name: 'reform',
          phone:'',
          company:'',
          entrytime:'2018-1-1'
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');

      },
      handlesubmit(){
        console.log(this.reform)
        let params = {};
        //params.name = this.reform.name
        //reInfo(params).then()
        this.putRequest("/sys/user/",this.reform).then((res)=>{
          console.log(res)
          /*if(res.data.status == '200'){

          }*/
          this.isDisabled = true

          this.$message({
            message: res.data.msg,
            type: res.data.status
          });
        })
      },
      cancel(){
        this.isDisabled = true
      },

      reuser(){
        console.log("reuser")
        this.isDisabled = false
        this.reform.id = this.form.id
        this.reform.enabled = this.form.enabled
        this.reform.name = this.form.name
        this.reform.phone = this.form.phone
        this.reform.company = this.form.company
        //this.reform.entrytime = this.form.entrytime


      },
      getUserList(){
        this.getRequest("/sys/user/info").then((res)=>{
          console.log("获取到的所有用户数据")
          console.log(res)
          this.form.id = res.data.id
          this.form.name = res.data.name
          this.form.enabled = res.data.enabled
          this.form.phone = res.data.phone
          this.form.company = res.data.company
          //this.form.entrytime = res.data.entrytime

          let date = new Date(res.data.entrytime); //获取一个时间对象

          /**
           1. 下面是获取时间日期的方法，需要什么样的格式自己拼接起来就好了
           2. 更多好用的方法可以在这查到 -> http://www.w3school.com.cn/jsref/jsref_obj_date.asp
           */
          let Year = date.getFullYear();  // 获取完整的年份(4位,1970)
          let Month = date.getMonth()+1;  // 获取月份(0-11,0代表1月,用的时候记得加上1)
          let day = date.getDate();  // 获取日(1-31)
          date.getTime();  // 获取时间(从1970.1.1开始的毫秒数)
          date.getHours();  // 获取小时数(0-23)
          date.getMinutes();  // 获取分钟数(0-59)
          date.getSeconds();  // 获取秒数(0-59)
          let dateStr = Year+"-"+Month+'-'+day
          this.form.entrytime = dateStr

        })
      }

    },
    mounted () {
      //this.onSubmit();
      this.getUserList()
    }

  }

</script>
